<script lang="ts" setup>
import { ref, defineProps } from 'vue'
import type { HotTopicType } from '@/types/hot-topic'

const props = defineProps<{
    hotTopicData: HotTopicType[]
}>()
</script>

<template>
    <view class="topic">
        <h1 class="topic-h1">热门话题</h1>
        <view class="topic-popular" v-for="item in props.hotTopicData" :key="item.id">
            <view style="display: flex;align-items: center;">
                <view class="topic-popular-fire">
                    <text>{{ item.ranking }}</text>
                </view>
                <view style="margin-left: 40rpx;">
                    <h2 class="topic-popular-h2">{{ item.title }}</h2>
                    <text class="topic-popular-number">{{ item.quantity }}人参与</text>
                </view>
            </view>
            <view>
                <text class="topic-popular-text">{{ item.heat }}热度</text>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
//  热门话题
.topic {
    margin-top: 30rpx;

    &-h1 {
        font-size: 38rpx;
    }

    &-popular {
        margin-top: 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-fire {
            color: red;
            font-size: 35rpx;
            font-weight: 700;
        }

        &-h2 {
            font-size: 35rpx;
        }

        &-number {
            font-size: 26rpx;
            color: #9b9c9c;
        }

        &-text {
            font-size: 30rpx;
            color: #9b9c9c;
        }
    }
}
</style>